<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="right">
        <view class="u-m-r-40" @tap="toAdd">新增密码</view>
      </block>
    </cu-custom>

    <view class="wrap">
      <!-- 查询系列 -->
      <view class="cu-bar search bg-white">
        <view style="width: 100%; padding: 0 20rpx 0 20rpx">
          <u-search
            class="search-width"
            shape="round"
            placeholder="模糊搜索密码名称"
            v-model="name"
            :show-action="false"
            @clear="change"
            @custom="change"
            @search="change"
          ></u-search>
        </view>
      </view>

      <!-- 查询记录列表 -->
      <scroll-view scroll-y class="sv" :style="{ height: navHeight + 'px' }" @scrolltolower="reachBottom">
        <view class="page-box">
          <u-swipe-action
            v-for="(item, index) in dataList"
            :key="item.id"
            :index="index"
            :options="options"
            @click="click"
          >
            <view class="order u-border-bottom">
              <view class="order-item">
                <view class="left title-wrap">
                  <view class="title">{{ item.name }}</view>

                  <view class="content">
                    <view class="type">登录名: {{ item.username }}</view>
                  </view>
                </view>
              </view>
            </view>
          </u-swipe-action>
          <u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
        </view>
      </scroll-view>
    </view>

    <!-- 确认删除框 -->
    <Confirm ref="Confirm"></Confirm>
  </view>
</template>

<script>
import Confirm from '@/components/confirm.vue'

export default {
  data() {
    return {
      current: 1,
      size: 20,
      dataList: [],
      loadStatus: 'loadmore',
      pH: 0, //窗口高度
      navHeight: 0, //元素的所需高度
      name: '',
      options: [
        {
          text: '详情',
          style: {
            backgroundColor: '#007aff'
          }
        },
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    }
  },
  onReady() {
    // 动态获取剩余的高度
    var that = this
    uni.getSystemInfo({
      success: function (res) {
        that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
        let titleH = uni.createSelectorQuery().select('.sv') //想要获取高度的元素名（class/id）
        titleH
          .boundingClientRect((data) => {
            let pH = that._data.pH
            that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          })
          .exec()
      }
    })
  },
  components: {
    Confirm
  },
  onUnload() {
    // 移除监听
    uni.$off('refreshPassPage')
  },
  async onLoad() {
    // 刷新监听
    uni.$on('refreshPassPage', () => {
      // 执行刷新方法
      this.change()
    })

    this.change()
  },
  methods: {
    // 页面数据
    async getOrderList(current) {
      let params = {
        name: this.name,
        currentPage: current,
        size: this.size
      }

      let res = await this.$u.api.getPassPageData(params)
      let data = JSON.parse(JSON.stringify(res.data))

      // 无数据 nomore 页数减回来
      if (data.length == 0) {
        this.loadStatus = 'nomore'
        this.current = --this.current
        return
      }

      if (this.dataList.length == 0) {
        // 赋值
        this.dataList = res.data
      } else {
        // 下拉追加
        data.forEach((item) => {
          this.dataList.push(item)
        })
      }
      this.loadStatus = 'loadmore'
    },
    async change() {
      // 初始化列表和页数
      this.dataList = []
      this.current = 1
      this.getOrderList(this.current)
    },
    reachBottom() {
      // 加这个判断 为了防止重复下拉
      if (this.loadStatus != 'loading') {
        // 下拉增加页数
        this.current = ++this.current

        this.loadStatus = 'loading'
        setTimeout(() => {
          this.getOrderList(this.current)
        }, 1200)
      }
    },
    closeDropdown() {
      this.$refs.uDropdown.close()
    },
    /**
     * 查看详情 删除记录
     * @param {Object} index1
     * @param {Object} index
     */
    click(index, index1) {
      if (index1 == 1) {
        // 删除
        let id = this.dataList[index].id
        let name = this.dataList[index].name

        this.$refs['Confirm'].open({
          title: '提示',
          content: `是否确定删除 [${name}]?`,
          callback: (action) => {
            if (action == 'sumbit') {
              // 删除记录
              this.$u.api.delPass(id).then((res) => {
                this.$u.toast('删除成功')

                // 重新查询
                this.change()
              })
            }
          }
        })
      } else {
        let id = this.dataList[index].id
        // 跳转详情页
        this.$u.route({
          type: 'navigateTo',
          url: `/pages/index/pass/pass_detail?id=${id}`
        })
      }
    },
    /**
     * 跳转新增记录页面
     */
    toAdd() {
      this.$u.route({
        type: 'navigateTo',
        url: '/pages/index/pass/pass_add'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  margin: 20rpx 40rpx;
  font-size: 24rpx;
}

.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 0 20rpx 0 20rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  display: flex;
  padding: 20rpx;

  .order-item {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 35rpx;
        line-height: 45rpx;
      }
    }

    .content {
      .type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: $u-type-primary;
      }

      .other-type {
        margin: 6rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }
    }

    .right {
      text-align: right;
    }
  }
}

.swipe-right-item-blue {
  margin: 25rpx auto;
  border-top-left-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  float: left;
  height: 140rpx;

  width: 150rpx;
  background-color: #007aff;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}

.swipe-right-item-red {
  margin: 25rpx auto;
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  float: left;
  height: 140rpx;

  width: 150rpx;
  background-color: #dd524d;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}
</style>
